<template>
	<view>
		<navbar title="创建任务" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__title">
						任务标题
					</view>
					<scroll-view scroll-x="true" style="width: 660rpx;">
						<view class="con__box__l">
							<view class="con__box__l__item" v-for="(item,index) in btlist" :key="index"
								@click="curbt=index,form.type=item.type" :class="curbt==index?'active':''">
								<image :src="'/static/kh/'+item.icon+'.png'" :style="item.s" mode=""></image>
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							执行人
						</view>
						<view class="con__box__item__inp" @click="navto('/pages/customer/checkxs')">
							<view class="con__box__item__inp__timelabel" v-if="!userobj">
								请选择执行人
							</view>
							<view class="con__box__item__inp__time" v-else>
								{{userobj.manager_name}}
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							客户
						</view>
						<view class="con__box__item__inp" @click="navto('/pages/customer/choice')">
							<view class="con__box__item__inp__timelabel" v-if="!customerobj">
								请选择客户
							</view>
							<view class="con__box__item__inp__time" v-else>
								{{customerobj.username}}
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							提醒时间
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center" @click="show=true,curtime=1">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.noticetime">
									选择日期
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(form.noticetime).getTime(), 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class=""
								style="width: 2rpx;height: 22rpx;background: #888888;opacity: 0.5;margin: 0 14rpx;">

							</view>
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.noticetime">
									选择时间
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(form.noticetime).getTime(), 'hh:MM')}}
								</view>
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							截止时间
						</view>
						<view class="con__box__item__inp u-flex u-flex-end u-flex-y-center" @click="show=true,curtime=2">
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.endtime">
									选择日期
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(form.endtime).getTime(), 'yyyy-mm-dd')}}
								</view>
							</view>
							<view class=""
								style="width: 2rpx;height: 22rpx;background: #888888;opacity: 0.5;margin: 0 14rpx;">

							</view>
							<view class="">
								<view class="con__box__item__inp__timelabel" v-if="!form.endtime">
									选择时间
								</view>
								<view class="con__box__item__inp__time" v-else>
									{{$u.timeFormat(new Date(form.endtime).getTime(), 'hh:MM')}}
								</view>
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							截止时提醒未完成任务
						</view>
						<view class="con__box__item__inp u-flex u-flex-end">
							<u-switch activeColor="#1275d5" size="25" v-model="value"></u-switch>
						</view>
					</view>
					<view class="con__box__ti">
						<view class="con__box__ti__line">

						</view>
						话术
					</view>
					<u--textarea :showConfirmBar='false' v-model="form.content" height='100' autoHeight
						placeholder="输入话术，说明在通话时如何与客户进行沟通" border='none' maxlength='1000'
						:placeholderStyle='{color:"#919191",fontSzie:"24rpx",}' count></u--textarea>
					<u-button color="#3262FD" text="保存" @click="submit" :loading="loading"
						:customStyle='{width:"628rpx",height:"94rpx",marginTop:"120rpx",marginLeft:0,padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'></u-button>
				</view>
			</view>
		</scroll-view>
		<u-datetime-picker :show="show" v-model="value1" :minDate='minDate' mode="datetime" @cancel="show=false" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				loading:false,
				show: false,
				value1: Number(new Date()),
				minDate:Number(new Date()),
				value2: '',
				value: true,
				btlist: [{
						name: "电话",
						icon: 'dhicon',
						s: 'width: 33rpx;height: 33rpx;margin-right: 19rpx;',
						type: 1
					},
					{
						name: "短信",
						icon: 'dxicon',
						s: 'width: 32rpx;height: 30rpx;margin-right: 14rpx;',
						type: 2
					},
					{
						name: "微信",
						icon: 'wxicon',
						s: 'width: 37rpx;height: 30rpx;margin-right: 8rpx;',
						type: 3
					},
					{
						name: "拜访",
						icon: 'bficon',
						s: 'width: 29rpx;height: 34rpx;margin-right: 10rpx;',
						type: 4
					},
				],
				curbt: 0,
				form: {
					"type": 1,
					"user_id": null,
					"customer_id": null,
					"noticetime": "",
					"endtime": "",
					"end_notice": 1,
					"content": ""
				},
				userobj: null,
				customerobj: null,
				curtime:1
			};
		},
		onShow() {
			console.log(this.$store.state.curcustomer)
			if (this.$store.state.curcustomer) {
				this.customerobj = this.$store.state.curcustomer
			}
			if (this.$store.state.curuser) {
				this.userobj = this.$store.state.curuser
			}
			// console.log(this.userobj, this.customerobj)
		},
		methods:{
			confirm(e){
				if(this.curtime==1){
					if(new Date(this.form.endtime).getTime()<e.value){
						uni.$u.toast('提醒时间须在截止时间前')
						return
					}
					this.form.noticetime=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
					this.value1=e.value
					this.minDate=e.value
				}else{
					if(!this.form.noticetime){
						uni.$u.toast('请先选择提醒时间')
						return
					}
					this.form.endtime=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				}
				
				this.show=false
			},
			async submit(){
				this.form.customer_id=this.customerobj.id
				this.form.user_id=this.userobj.manager_id
				let {user_id,customer_id,noticetime,endtime,content} = this.form
				if(!user_id){
					uni.$u.toast('请选择执行人')
					return
				}
				if(!customer_id){
					uni.$u.toast('请选择客户')
					return
				}
				if(!noticetime){
					uni.$u.toast('请选择提醒时间')
					return
				}
				if(!endtime){
					uni.$u.toast('请选择截至时间')
					return
				}
				if(!content){
					uni.$u.toast('请填写话术')
					return
				}
				let _this=this
				this.loading=true
				let res = await sale.createTask(this.form)
				if(res.data.code==1){
					uni.$u.toast('任务创建成功')
					setTimeout(()=>{
						_this.loading=false
						uni.navigateBack()
					},1000)
				}
			}
		},
		onUnload() {
			this.$store.commit('setcustomer', null)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			padding: 73rpx 0 68rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			&__title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #616266;
				line-height: 36rpx;
				margin-bottom: 38rpx;
			}

			&__l {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				width: fit-content;

				&__item {
					width: 165rpx;
					height: 101rpx;
					background: #F5F6FA;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #010101;
					line-height: 26rpx;
					margin-right: 17rpx;
					flex-wrap: nowrap;
				}

				.active {
					color: #fff;
					background: #3262FD;
				}
			}

			&__item {
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 32rpx;
				border-bottom: 2rpx solid #F9F9F9;

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 26rpx;
				}

				&__m {
					width: 12rpx;
					height: 21rpx;
					margin-left: 10rpx;
				}

				&__inp {
					flex: 1;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #020202;
					line-height: 38rpx;
					text-align: right;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}

					&__timelabel {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}
				}
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #1E1E1E;
				line-height: 26rpx;
				display: flex;
				align-items: center;
				padding: 41rpx 0 33rpx;

				&__line {
					width: 5rpx;
					height: 24rpx;
					background: #3262FD;
					margin-right: 10rpx;
				}
			}

		}
	}

	::v-deep.u-textarea {
		padding: 0 30rpx 0 0;

		.u-textarea__field {
			font-size: 24rpx;
		}

		.u-textarea__count {
			bottom: -60rpx;
			right: 30rpx;
		}
	}

	// .textareabox{
	// 	position: relative;
	// 	&__count{
	// 		font-family: PingFang SC;
	// 		font-weight: 500;
	// 		font-size: 24rpx;
	// 		color: #AFAFAF;
	// 		line-height: 24rpx;
	// 		margin-top: 20rpx;
	// 		text-align: right;
	// 		margin-right: 30rpx;

	// 	}
	// }
</style>